<template>
  <a-select
    v-model:value="selectedRoleVal"
    mode="multiple"
    :dropdownStyle="{}"
    :placeholder="l('FilterByRole')"
    @change="selectedChange($event)"
    allowClear
    style="width: 100%"
    :maxTagCount="3"
  >
    <a-select-option :key="index" :value="role.id" v-for="(role, index) of roles">
      {{ role.displayName }}
    </a-select-option>
  </a-select>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import { RoleListDto, RoleServiceProxy } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'role-combox-new',
    mixins: [AppComponentBase],
    props: {
      value: {
        type: Array,
      },
    },
    data() {
      // const roles : RoleListDto[] = [];
      return {
        roleService: new RoleServiceProxy(this.$apiUrl, this.$api),
        roles: new Array<RoleListDto>(),
      };
    },
    emits: ['update:value', 'change'],
    computed: {
      selectedRoleVal: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('update:value', val);
        },
      },
    },
    mounted() {
      this.roleService.getAll(undefined).then((result) => {
        this.roles = result.items as RoleListDto[];
      });
    },
    methods: {
      selectedChange(selectKey) {
        this.selectedRoleVal = selectKey;
        this.$emit('change', selectKey);
      },
    },
  });</script
>s
